<template>
  <Card :tab-list="tabListTitle" v-bind="$attrs" :active-tab-key="activeKey" @tabChange="onTabChange">
    <p v-if="activeKey === '1'">
      <VisitAnalysisLine :activeKey="activeKey" :dateType="dateType" />
    </p>
    <p v-if="activeKey === '2'">
      <VisitAnalysis :activeKey="activeKey" :dateType="dateType" />
    </p>
    <p v-if="activeKey === '3'">
      <VisitAnalysisBar :activeKey="activeKey" :dateType="dateType" />
    </p>
    <p v-if="activeKey === '4'">
      <VisitAnalysisLine :activeKey="activeKey" :dateType="dateType" />
    </p>
    <template #tabBarExtraContent>
      <a-radio-group v-model:value="dateType" @change="initStatistics">
        <a-radio :value="1">最近7天</a-radio>
        <a-radio :value="2">最近30天</a-radio>
        <a-radio :value="3">最近一年</a-radio>
      </a-radio-group>
    </template>
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import VisitAnalysis from './VisitAnalysis.vue';
  import VisitAnalysisBar from './VisitAnalysisBar.vue';
  import VisitAnalysisLine from './VisitAnalysisLine.vue';

  const activeKey = ref('1');
  const dateType = ref<number>(1);

  const tabListTitle = [
    {
      key: '1',
      tab: '充值趋势',
    },
    {
      key: '2',
      tab: '发放趋势',
    },
    {
      key: '3',
      tab: '开票趋势',
    },
    {
      key: '4',
      tab: '退款趋势',
    },
  ];

  function onTabChange(key) {
    activeKey.value = key;
  }
  function initStatistics(key){
    dateType.value = key.target.value;
  };
</script>
